<template>
    <div style="margin-top: 15px;margin-left: 15px">
        <!-- 弹出层开始 -->
        <el-dialog
                :title="'录入【'+[patientName]+'】的检查结果'"
                :visible.sync="dialogVisible"
                width="50%"
                center
                :before-close="handleClose">
            <!--form表单开始-->
            <span>
         <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="检查结果">
             <el-input
                     prop="resultMsg"  placeholder="请输入内容" v-model="form.resultMsg">
             </el-input>
           </el-form-item>

             <!-- 头像 -->
                <el-form-item label="患者检查结果" prop="resultImg" label-width="90px" align="center">
                    <el-upload  ref="upload"
                                action="#"
                                :multiple="true"
                                :on-change="fileChange"
                                :on-remove="fileRemove"
                                :auto-upload="false"
                                :on-success="handleAvatarSuccess"
                                :limit="1"
                                list-type="resultImg" style="border-radius: 50%;margin-left: 0;border: 1px dashed #d9d9d9;width:100px;height:100px">
                        <img v-if="form.resultImg" :src="form.resultImg" width="100px" height="100px" style="border-radius: 50%;margin: 0">
                        <i v-else class="el-icon-plus" style="margin-top: 40px"></i>
                    </el-upload>
                    <div style="margin-left: 200px;">
                        <el-button type="primary" size="mini" v-if="isShow" @click="show">提交</el-button>
                    </div>
                </el-form-item>
        </el-form>


                <!-- form表单结束 -->
         </span>
            <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="addMsg">确 定</el-button>
           <el-button @click="dialogVisible = false" style="">取 消</el-button>
         </span>
        </el-dialog>
        <!--弹出层结束-->

        <!-- 查询条件开始 -->
        <el-card style="margin-bottom:3px">
            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                <el-form-item label="检查项目" prop="checkItemIds" style="float: left">
                    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
                    <div style="clear: both"/>
                    <el-checkbox-group v-model="queryParams.checkItemIds" @change="handleCheckedItemChange">
                        <el-checkbox
                                v-for="d in checkItemOptions"
                                :key="d.checkItemId"
                                :label="d.checkItemId"
                                :value="d.checkItemId">{{ d.checkItemName }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="挂号单号" prop="regId">
                    <el-input
                            v-model="queryParams.regId"
                            placeholder="请输入挂号单号"
                            clearable
                            size="small"
                            style="width:380px"
                    />
                </el-form-item>
                <el-form-item label="患者姓名" prop="patientName" style="clear:both;float: left">
                    <el-input
                            v-model="queryParams.patientName"
                            placeholder="请输入患者姓名"
                            clearable
                            size="small"
                            style="width:380px"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="query">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="dobquery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>








        <!--table表格-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" style="margin-left: 80px">
                        <el-form-item label="价格"><span>{{ props.row.price }}</span></el-form-item>
                        <el-form-item label="创建时间"><span>{{ props.row.createTime}}</span></el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cocId"
                    label="检查单位"
                    min-width="100px"
            >
            </el-table-column>
            <el-table-column
                    prop="regId"
                    label="挂号单号"
                    min-width="100px"
            >
            </el-table-column>
            <el-table-column
                    prop="checkItemName"
                    label="项目名称"
            >
            </el-table-column>
            <el-table-column
                    prop="patientName"
                    label="患者姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="resultStatus"
                    label="检查状态"
                    :formatter="statusFormat"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" @click="handleClick(scope.row)" type="text" size="small">录入结果</el-button>
                </template>
            </el-table-column>
        </el-table>



        <!--分页-->
        <el-pagination align="left"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page.current"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="page.total">
        </el-pagination>

    </div>

</template>

<script>
    const cityOptions = [];
    export default {
        name: "Checkresult",
        data() {
            return {
                isShow:false,
                /* 存放头像 */
                fileList: [],
                //查询参数
                queryParams: {
                    regId: undefined,
                    patientName: undefined,
                    checkItemIds: [],
                },

                //是否为全选状态
                checkAll: true,
                //检查项目数据
                checkItemOptions: [],
                cities: cityOptions,
                //是否为半选状态
                isIndeterminate: false,
                //分页
                page: {
                    total: 5,
                    size: 5,
                    current: 1
                },
                resultMsg: "",
                dialogVisible: false,
                formInline: {
                    user: '',
                    region: ''
                },
                form: {
                    type: []
                },
                patientName:'',
                //表格数据
                tableData: [],
                // 是否打开录入结果的弹出层
                open: false,
                // 弹出层的标题
                title: '',
                // 当前查看的数据
                currentResult: {
                    resultMsg: "",
                    resultImg: []
                },
                //系统状态
                statusOptions:[],
                //处方检查项ID
                cocId:'',




                //阿里云文件上传
                objData:{
                    OSSAccessKeyId:'',
                    policy:'',
                    Signature:'',
                    key:'',
                    host:'',
                    dir:''
                }




            }
        },
        methods: {
            /* 头像 */
            //获取图片列表：上传头像时候触发
            fileChange(file, fileList) {
                this.fileList = fileList;
                //console.log("获取多个图片", this.fileList)
                // this.$refs.pictureSubmit.style.display=inline-block;
                this.isShow=true;
            },
            //触发删除列表
            fileRemove(file, fileList) {
                this.fileList = fileList;
                //console.log(this.fileList)
            },
            //上传成功后处理方法
            handleAvatarSuccess(res, file) {
                //URL对象可以通过createObjectURL(any)方法来将任意内容用一个地址来表示
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            //上传头像
            show() {
                let formData = new FormData;
                if (this.fileList.length == 0) {
                    this.$message.error("还没有上传图片")
                    return;
                }
                this.fileList.forEach((File) => {
                    //将图片数据追加到formData中
                    formData.append("file", File.raw)
                })
                this.$axios({  //使用axios发出请求发出请求上传请求
                    method: "post",
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    url: "http://localhost:9999/examine/result/uploadFile",
                    data: formData
                }).then(res => {
                    if (res.data.msg == "上传头像成功") {
                        this.$message.success(res.data.msg)
                        this.form.resultImg = res.data.t;
                        this.$refs.upload.clearFiles();
                        this.isShow=false;
                    } else {
                        this.$message.error("上传头像失败")
                    }
                })
            },
            //重置
            dobquery(){
                this.queryParams={
                    regId: undefined,
                    patientName: undefined,
                    checkItemIds: []};
                this.queryAll();
                this.selectAllCheckItem();
                this.isIndeterminate = false;
                this.checkAll = true;
            },
            onSubmit() {
                console.log('submit!');
            },
            /*查看弹出层*/
            handleClick(row) {
                this.dialogVisible = true;
                this.patientName=row.patientName;
                this.cocId=row.cocId;
                this.form= row;
                console.log(row);
                console.log(this.patientName);
            },



            // 全选
            handleCheckAllChange(val) {
                this.queryParams.checkItemIds = val ? this.checkItemOptions.map(item => item.checkItemId) : []
                this.isIndeterminate = false
            },
            // 选择某一个项目
            handleCheckedItemChange(value) {
                const checkedCount = value.length
                this.checkAll = checkedCount === this.checkItemOptions.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkItemOptions.length
            },

            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size = val;
                // 重新查询
                this.queryData();
            },


            //点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current = val;
                // 重新查询
                this.queryData();
            },
            //查询
            queryData(){
                this.queryAll();
                this.page.current=1;
            },



            queryAll(){
                this.$axios.post("/examine/order/queryAll/"+this.page.current+"/"+this.page.size,this.queryParams).then(r=>{
                    this.tableData=r.data.t.records;
                    this.page.total=r.data.t.total;
                })
            },



            //查询
            query(){
                this.queryAll()

            },
            // 加载所有可用的检查项目
            selectAllCheckItem(){
                this.$axios.get("/examine/list").then(r=>{
                    this.checkItemOptions = r.data.t
                    this.queryParams.checkItemIds = this.checkItemOptions.map(item => item.checkItemId)
                })
            },
            //状态字典的解析
            initStatus(){
                this.$axios.get("/system/api/dict/data/findByType/his_check_result_status").then(result=>{
                    this.statusOptions=result.data.t;
                })
            },
            //status
            statusFormat(row){
                let v=row.resultStatus;
                return this.formatDict(this.statusOptions,v);
            },



            //录入检查结果
            addMsg(file){
                this.$axios.post("/examine/result/addPicture",this.form).then(r=>{
                    if (r.data.t){
                        this.$message.success(r.data.msg);
                    }else {
                        this.$message.error("操作失败");
                    }
                   // this.initUser();
                    this.dialogVisible=false;
                    this.title='';
                    this.form={};
                })


            },




            /*上传文件*/
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },

            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            /*弹出层关闭*/
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        },







        created() {
            //加载系统状态
            this.initStatus();
            //加载状态的字典数据
            this.selectAllCheckItem();
            //展示页面
            this.queryAll()
        },
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
